<template >
 
<view class="container">
  <div   class='order' >
        <div  class="city">
            <navigator  hover-class="none" url="../shopping/address"  >
             <div v-if='nothingCity' @click='todetails' class='li'   >
               <p>
                   <span>{{items.consignee}}</span>
                   <span>{{items.phone}}</span>
                 
               </p>
               <p> <img  style="width:8px;height:13px;margin-left:8px;" class="icon iconfont" src="/static/images/go.png"/> </p>
               <p>
                   <!-- <span class='acquiescence'>{{isDefault(items.isDefault)}}</span> -->
                   <span>{{items.address}} </span>
               </p>
           </div>
           <div @click='todetails' v-else class='nothingCity'>
               <p>收货地址</p>
               <img  style="width:8px;height:13px;margin-top:16px;margin-left:8px;" class="icon iconfont" src="/static/images/go.png"/>
               <p>请填写收货地址</p>
               
           </div>
            </navigator>
        </div>
        <div class='box'>
                    <div class='goods'>
                        <div class='top'>大风车</div>
                        <ul>
                            <li :key='index' v-for="(value,index) in goodsData.list">
                                <div v-bind:style="{ 'background-image': 'url(' +value.img + ')','background-repeat':'no-repeat','background-size':'cover' }" class='pic'></div>
                                <div class='right'>
                                    <p>
                                        {{value.name}}
                                    </p>
                                    <p>  数量：{{value.chosseNum}}</p>
                                    <p>¥{{value.price+value.priceDiff}}</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div style='height:7px;background-color:rgba(244,244,244,1)'></div>
                    <div class='freight'>
                        <span>运费</span>
                        <span> 物流到付</span>
                       
                    </div>
                    <div class='pay'>
                        <span>微信支付</span>
                        <span> ¥{{wxPrice}}</span>
                        
                    </div>
                    <!-- <div @click="couponsShowClick" class="couponsShow">
                      <span>优惠券</span>
                      <span style="color:#ff5454;font-size:15px">{{couponsShowPrice}}</span>
                    </div> -->
                 
        </div>
      
      
         
           
      
 
        
   </div>

 

 

   

    <view :style="{height:iphoneXb2}" class="order-total">
        <view class="l">实付：￥{{wxPrice}}</view>
        <view class="r" @click="submitOrder">
           <!-- <navigator  hover-class="none" url="../pay/pay"  > -->
          去付款
           <!-- </navigator> -->
          </view>
    </view>
</view>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
import util from '@/utils/util'
import pay from '@/services/pay'
var app = getApp();
export default {
  data () {
    return {
      iphoneXb2:'',
      checkedGoodsList: [],
      checkedAddress: {},
      checkedCoupon: [],
      couponList: [],
      goodsTotalPrice: 0.00, // 商品总价
      freightPrice: 0.00, // 快递费
      couponPrice: 0.00, // 优惠券的价格
      orderTotalPrice: 0.00, // 订单总价
      actualPrice: 0.00, // 实际需要支付的总价
      addressId: 0, // 地址ID
      couponId: 0 ,// 优惠卷ID
      isCardID:false,
      newitem:{},
      num:'',
      couponsArr:[],
      goodsId:'',
      couponsShow:false,
      couponsShowPrice:'',
      items: "",
      goodsData: "",
      freight: "",
      wxPrice: "",
      storePrice:'',
      NowPrice:'',
      newPrice: "",
      Dataitems: "",
      nothingCity: false,
      Toprevent: true ,//防止重复提交
      
       ifId:false
    }
  },
  onUnload(){
       wx.setStorageSync('otherData', '' );
  },
  onShow: function (options) {
    console.log('判断回来',this.$store.state.chooseAddress)
    this.getCheckoutInfo(this.$store.state.chooseAddress)
    
 
    wx.hideLoading() //结束加载
    this.iphoneXb2=app.globalData.iphoneH;
   
      this.goodsData=wx.getStorageSync('otherData');//获取本地存储信息
   
     
      this.getCheckoutInfo()
  
       let price=0;
       let storePrice=0;
    for(let i=0;i<this.goodsData.list.length;i++){
        price=price+parseFloat( (this.goodsData.list[i].price+this.goodsData.list[i].priceDiff)*this.goodsData.list[i].chosseNum );
        storePrice=storePrice+parseFloat( this.goodsData.list[i].price *this.goodsData.list[i].chosseNum );
    }
    this.wxPrice=price;
    this.storePrice=storePrice;
    
  },
  methods: {
    // 获地址列表
    async getCheckoutInfo (index) {
     let data=  JSON.stringify({})
        const res= await api.getAddressList({'data':data});
      // console.log('订单详情,请求结果', res);
         if (res.data) {
            
            if (index&&index!='undefined'&&index!=undefined  ) {
           
              console.log('s',index-1)
              this.items = res.data[index-1];
              this.nothingCity = true;
              
            } else {
              for (let i = 0; i < res.data.length; i++) {
                if (res.data[i].isDefault == 1) {
                  this.items = res.data[i];
                  this.nothingCity = true;
                  console.log(this.items);
                }
              }
            }
            this.addressId=this.items.addressId
            this.newitem.name=this.items.name
          }
    },
    // 选择收获地址
    selectAddress () {
      wx.navigateTo({
        // url: '../shopping/address'
      })
    },
    // 添加收获地址
    addAddress () {
      wx.navigateTo({
        url: '../shopping/addressAdd'
      })
    },
    // 点击“去付款”
    async submitOrder () {
      
      if (this.nothingCity ==false) {
        util.showErrorToast('请选择收货地址');
        return false;
      }
  
      let Ydata=wx.getStorageSync('otherData')
      console.log(Ydata.list)
      let itemsList=[]
      let totHnum=0;
      let totNum=0;
      
      for(let i=0;i<Ydata.list.length;i++){
         console.log(i)
        let obj={
            "colorSno": Ydata.list[i].colorSno,
            "colorName":Ydata.list[i].name,
            "num": Ydata.list[i].chosseNum,
            "price": Ydata.list[i].price,
            "isSel": 1,
            "goods": Ydata.list[i].chosseNum,
            "hnum": Ydata.list[i].chosseNum/Ydata.skuSize.length,
            "productId":  Ydata.list[i].productId,
            'shareStrId':Ydata.list[i].shareId,
            "attrs": "",
            "shopingType": "",
            "isGift": "0",
            "packetId": "",
            "packetAmnt": "",
            "enrollId": Ydata.list[i].enrollId,
            "amnt": Ydata.list[i].price*Ydata.list[i].chosseNum,
            "realAmnt": Ydata.list[i].price*Ydata.list[i].chosseNum,
            "skuSize":Ydata.skuSize
          }
          totHnum=parseFloat(totHnum)+parseFloat(Ydata.list[i].chosseNum/Ydata.skuSize.length);
          totNum=parseFloat(totNum)+parseFloat(Ydata.list[i].chosseNum);
          
          itemsList.push(obj)
      }
      console.log(itemsList)
    let jsonData={
        "addressId": this.addressId,
        "packetId": "",
        "packetAmnt": "",
        "totPacketAmnt": "",
        "totAmnt": this.wxPrice,
        "totFreight": "0.00",
        "stores": [{
          "storeId": Ydata.storeId,  // 目前为单一店铺 写死id
          "postScript": "尽早发货",
          "howOos": "1",
          "invPayee": "",
          "invContent": "",
          "deliverType": "",
          "deliverDesc": "",
          "deliverId": "",
          "creditType": "",
          "creditDesc": "",
          "packetId": "",
          "packetAmnt": "",
          "totNum": totNum,
          "totHnum": totHnum,
          "totAmnt": this.storePrice,// 目前为单一店铺 就用总价 
          "freight": "0.00",
          "freightMode": "0",
          "items": itemsList
        }]
     }

console.log(jsonData)


        let data=JSON.stringify(jsonData)
      const res = await api.BuyerOrderAdd({"data":data});

 




      if (res.status === 0) {
          wx.showToast({
            title: '下单成功'
          });
           wx.navigateTo({
              url: '../pay/pay?orderId=1&price='+this.wxPrice 
            })
          wx.setStorageSync('otherPayData', res.data.payInfo ) 
          // console.log( wx.getStorageSync('otherPayData' ),'提交' )
        
        // this.startPay(res.data.payInfo)
         
      } else {
          wx.showToast({
            image: '/static/images/icon_error.png',
            title: res.msg,
            mask: true
          });
      }
    },
  async startPay (payInfo) {
         let payInfoReq = {}
          payInfoReq = payInfo;
          payInfoReq.payMode = "weChatPay";
          payInfoReq.payClient = "jsapi_buyer_mini";//h5
           payInfoReq.openId = wx.getStorageSync('openId')
          //  'o4jjr4qU9XryOBXACp5yFv3u_Hlw'
        let data=JSON.stringify(payInfoReq)
        const res = await api.BuyerOrderPay({"data":data});
            let payParam = res.data.payInfo;
            wx.requestPayment({
              'timeStamp': payParam.timeStamp,
              'nonceStr': payParam.nonceStr,
              'package': payParam.package,
              'signType': payParam.signType,
              'paySign': payParam.paySign,
              'success': function (res) {
                wx.redirectTo({
                  url: '../pay/payResult?status=1'
                })
              },
              'fail': function (res) {
                wx.redirectTo({
                  url: '../pay/payResult?status=0'
                })
              }
            })
   
    }
  },
  // 原生的分享功能
  onShareAppMessage: function () {
    return {
      title: 'dfcShop',
      desc: '大风车商场',
      path: '/pages/shopping/checkout'
    }
  }
}
</script>

<style lang='scss' scoped>
page{
    height: 100%;
    background: #f4f4f4;
}
  
.order-total{
    position: fixed;
    left:0;
    bottom: 0;
    height: 100rpx;
    width: 100%;
    display: flex;
}

.order-total .l{
    flex: 1;
    height: 100rpx;
    line-height: 100rpx;
    color: #b4282d;
    background: #fff;
    font-size: 33rpx;
    padding-left: 31.25rpx;
    border-top: 1rpx solid rgba(0,0,0,0.2);
    border-bottom: 1rpx solid rgba(0,0,0,0.2);
}

.order-total .r{
    width: 233rpx;
    height: 100rpx;
    background: #b4282d;
    border: 1px solid #b4282d;
    line-height: 100rpx;
    text-align: center;
    color: #fff;
    font-size: 30rpx;
}

.nothingCity {
  height: 45px;
  line-height: 45px;
  width: 92vw;
  margin: 0 auto;

  p:nth-child(1) {
    color: #000;
    font-size: 14px;
    float: left;
  }
  p:nth-child(3) {
    float: right;
    font-size: 12px;
    color: rgba(150, 150, 150, 1);
  }
  .icon {
    font-size: 12px;
    float: right;
    padding-left: 5px;
  }
}
.order {
  
  background-color: rgba(244, 244, 244, 1);
 
  .box {
    background-color: #fff;
    margin-top: 7px;
  }
  .freight,
  .pay,.couponsShow {
    color: #000;
    font-size: 13px;
    width: 100%;
    line-height: 44px;
    border-bottom: rgba(239, 239, 239, 1) 1px solid;
    height: 44px;
    span:nth-child(1) {
      float: left;
      margin-left: 20px;
    }
    span:nth-child(2) {
      float: right;
      margin-right: 20px;
    }
  }
  .city {
    background-color: #fff;
      padding: 0 4vw;
  border-top:9px solid #f4f4f4;
  }
  .li {
    width: 92vw;
    margin: 0 auto;
    border-bottom: #fff 1px solid;
    border-bottom: rgba(237, 237, 237, 1) 1px solid;
    p:nth-child(1) {
      padding-top: 12px;
      line-height: 20px;
      font-size: 14px;
      color: #000;
      span:nth-child(1) {
        padding-right: 19px;
      }
      span:nth-child(2) {
        padding-right: 20px;
        float: right;
      }
      span:nth-child(3) {
        font-size: 10px;
        width: 40px;
        height: 16px;
        border: 1px solid rgba(142, 167, 243, 1);
        border-radius: 4px;
        color: rgba(142, 167, 243, 1);
        text-align: center;
        display: inline-block;
        line-height: 14px;
      }
    }
    p:nth-child(2) {
      //   line-height: 20px;
      height: 8px;
      font-size: 14px;
      color: rgba(150, 150, 150, 1);
      //   margin-top:4px;
      //   margin-bottom:4px;
      .icon {
        font-size: 20px;
        float: right;
      }
    }
    p:nth-child(3) {
      line-height: 20px;
      font-size: 14px;
      color: rgba(150, 150, 150, 1);
      margin-bottom: 12px;
      overflow: hidden;
      height: 20px;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      .acquiescence {
        color: rgba(255, 44, 58, 1);
      }
    }
  }
  .goods {
    .top {
      line-height: 34px;
      font-size: 12px;
      border-bottom: 1px solid rgba(239, 239, 239, 1);
      width: 92vw;
      margin: 0 auto;
    }
    li {
      width: 92vw;
      margin: 0 auto;
      height: 100px;
      position: relative;
      .pic {
        float: left;
        width: 70px;
        height: 70px;
        margin-top: 15px;
      }
      .right {
        float: left;
        margin-left: 16px;
        width: 62vw;
        margin-top: 15px;

        p:nth-child(1) {
          overflow: hidden;
          height: 40px;
          line-height: 20px;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          color: #000;
          font-size: 14px;
        }
        p:nth-child(2) {
          font-size: 12px;
          line-height: 14px;
          color: rgba(147, 147, 147, 1);
        }
        p:nth-child(3) {
          color: rgba(254, 57, 57, 1);
          font-size: 12px;
          position: absolute;
          bottom: 11px;
          right: 6px;
        }
      }
    }
  }
.isCardID{
  position: fixed;
  z-index: 999;
  background: #fff;;
  width: 100%;
  bottom:0;
  .title{
    font-size: 13px;
    width: 94vw;;
    margin: 0 auto;
    line-height: 45px;
    border-bottom:1px solid rgba(239,239,239,1);
    text-indent: 10px;
    
  }
  .top{
       font-size: 12px;
        width: 94vw;;
        margin: 0 auto;
        text-indent: 10px;
        line-height: 30px;
        color:rgba(150,150,150,1)
    }
    input{
      text-indent: 18px;
      width: 94vw;
      background: rgba(242,242,242,1);
      border-radius: 4px;
      line-height: 43px;
      font-size: 13px;
      margin: 0 auto;
      display: block;
       margin-bottom: 16px;
    }
    .submit{
      line-height: 49px;
      width: 100vw;
      background: rgba(255,76,76,1);
      color: #fff;
      text-align: center;
      font-size: 16px;
    }
}
}
</style>
